
<script setup lang="ts">
import directive from '../utils/directive.ts'; // 引入自定义指令
// 注册自定义指令
const vZoom = directive.zoomDirective
</script>

<template>
    <div class="flex justify-center items-center h-screen overflow-hidden">
        <div class="item1 h-full flex-1 p-32 flex justify-center">
            <div class="h-full w-full overflow-hidden">
                <img class="image" v-zoom src="../../../assets/sqm/three-1.jpg" alt="">
            </div>
        </div>
        <div class="line-text">Hello World!</div>
        <div class="item2 h-full flex-1 p-32 flex justify-center">
            <div class="h-full w-full overflow-hidden">
                <img class="image" v-zoom src="../../../assets/sqm/three-2.jpg" alt="">
            </div>
        </div>
    </div>
</template>

<style scoped>
.item1{
    background-color: #343232;
}
.item2{
    background-color: #536f74;
}
.image{
    height: 100%;
    width: 100%;
    object-fit: cover;
}
.line-text{
    position: absolute;
    writing-mode: tb;
    height: 100%;
    text-align: center;
    font-size: 2rem;
    color: #fff;
    letter-spacing: 0.5rem;
}
</style>
